<template>
  <div>
    <div style="margin:5px 10px;">
      <el-row :gutter="12">
        <el-col :span="24">
          <el-alert
            title="尊敬的用户您好:"
            type="warning"
            show-icon
            :description="
              `截至${11}，你的短信已欠费,为了不影响您的使用，请尽快在iTown中台进行短信充值,以免给您带来不便，感谢您的配合`
            "
            :closable="false"
            close-text="立即购买"
            @close="BuyNow()"
          >
          </el-alert>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="24">
          <div style="margin:10px 10px;">
            <h3>短信账户 <span style="">年月日</span></h3>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card shadow="hover" class="el_card_height">
            <p class="p_center">
              <span style="margin-right:10px;">短信余量</span
              ><span style="margin-right:10px;"
                ><a
                  href="#"
                  style="text-decoration:none"
                  @click="PurchaseRecord"
                  >购买记录</a
                > </span
              ><Button type="primary" size="small" @click="BuySMS">购买</Button>
            </p>
            <p class="p_center" style="">
              <span style="margin-right:10px;">{{mesCount}}</span
              ><span style="margin-right:10px;">免费: 0条 </span>
            </p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="el_card_height">
            <p class="p_center">
              <span style="margin-right:10px;">当月累计发送</span
              ><span style="margin-right:10px;"
                ><a href="#" @click="UseDetails" style="text-decoration:none"
                  >使用明细</a
                >
              </span>
            </p>
            <p class="p_center">
              <span style="margin-right:10px;"> {{monthCount}}条 </span>
            </p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="el_card_height">
            <p class="p_center">
              <span style="margin-right:10px;">今日发送数量</span>
            </p>
            <p class="p_center">
              <span style="margin-right:10px;"> {{ dayCount }}条 </span>
            </p>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="24">
          <div style="margin:10px 10px;">
            <h3>每日发送统计</h3>
          </div>
        </el-col>
      </el-row>
       <el-row :gutter="12">
        <el-col :span="4">
          <div style="margin:10px 10px;">
            <el-button type="primary" @click="onday">上一月</el-button>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="margin:10px 10px;">
            <el-button type="success" @click="MsgNums">当月</el-button>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="margin:10px 10px;">
            <el-button type="primary" @click="nextday">下一月</el-button>
          </div>
        </el-col>  
      </el-row>
      <el-row :gutter="12">
        <el-col :span="24">
          <div style="margin:10px 10px;">
            <el-col :span="24">
              <el-card shadow="hover" style="height:600px">
                <vol-table
                  ref="accountInfo"
                  :columns="columns"
                  :height="400"
                  :columnIndex="false"
                  :tableData="dayList"
                ></vol-table>
                <!-- <div class="paginat">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[30, 60, 90, 120]"
                    :page-size="params.count"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  >
                  </el-pagination>
                </div> -->
              </el-card>
            </el-col>
          </div>
        </el-col>
      </el-row>
    </div>
    <vol-box
      :model.sync="model.box"
      title="短信充值"
      :height="400"
      :width="600"
      :padding="15"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="充值短信量:">
          <el-input v-model="form.RechargedVolume"   ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-radio-group
            v-model="form.tabPosition"
            @change="getValue()"
            style="margin-bottom: 30px;"
          >
            {{ form.tabPosition }}
            <el-radio-button label="1000">1000</el-radio-button>
            <el-radio-button label="5000">5000</el-radio-button>
            <el-radio-button label="10000">10000</el-radio-button>
            <el-radio-button label="50000">50000</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="费用合计:">
          <el-input v-model="form.totalExpenses" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <Button type="default" @click="()=>{this.model.box=false}">取消</Button>
        <Button type="primary" @click="closeChild()">支付</Button>
      </div>
    </vol-box>
    <vol-box
      :model.sync="model.box1"
      title="使用明细"
      :height="400"
      :width="800"
      :padding="15"
    >
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="手机号">
    <el-input v-model="formInline.phone" placeholder="手机号"></el-input>
  </el-form-item>
  <el-form-item label="创建时间">
    <el-date-picker
      v-model="formInline.time"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="选择日期">
    </el-date-picker>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>
    <vol-table
    ref="UseDetailsInfo"
    :columns="UseDetailscolumns"
    :height="400"
    :columnIndex="false"
    :tableData="UseDetailsData"
  ></vol-table>
     
    </vol-box>
    <vol-box
      :model.sync="model.box2"
      title="购买记录"
      :height="600"
      :width="800"
      :padding="15"
    >
    <vol-table
    ref="PurchaseRecordInfo"
    :columns="PurchaseRecordcolumns"
    :height="400"
    :columnIndex="false"
    :tableData="PurchaseRecordData"
  ></vol-table>
     
    </vol-box>
  </div>
</template>

<script>
import VolForm from "@/components/basic/VolForm.vue";
import VolBox from "@/components/basic/VolBox.vue";
import VolTable from "@/components/basic/VolTable.vue";
import { watch } from 'vue';
let date = new Date(); //获取日期  日期是2020-07 写成你自己的
 
 let year = date.getFullYear();
 let month = (date.getMonth()) < 10 ? (date.getMonth()) : (date.getMonth()); //自动补0
export default {
  name:'MsgNotes',
  components: {
    VolForm,
    "vol-box": VolBox,
    VolTable
  },
  data() {
    return {
      formInline: {
          phone: '',
          time: ''
        },
      model: {
        box: false,
        box1: false,
        box2: false
      },
      dayCount:0,
      dayList:[],
      monthCount:0,
      mesCount:0,
      total: 0, // 总条数
      //查询条件字段
      params: {
        orderid: "", //订单号
        note: "", //备注
        datetime: "", //入账日期
        functype: "", //类型
        start: 0, //起始下标
        count: 30, //请求条数
      },
      currentPage:1,
      form: {
        tabPosition: "",
        RechargedVolume: ""
      },

      //使用明细
      UseDetailsData:[],
      PurchaseRecordData:[],
      PurchaseRecordcolumns:[
        {
          field: "serialNumber",
          title: "流水号",
          type: "string",
          width: 120,
          align: "left"
        },
        {
          field: "createDate",
          title: "发起时间",
          type: "datetime",
          width: 85,
          align: "left",
          sortable: true
        },
           {
          field: "number",
          title: "短信条数(条)",
          type: "string",
          width: 80,
          align: "left"
        },
      
        {
          field: "money",
          title: "金额(元)",
          type: "string",
          width: 80,
          align: "left"
        },
     
        {
          field: "enterpriseCode",
          title: "买方企业码",
          type: "string",
          width: 80,
          align: "left"
        },
          {
          field: "enterpriseUser",
          title: "买方账号",
          type: "string",
          width: 80,
          align: "left"
        },
        //    {
        //   field: "payType",
        //   title: "支付类型",
        //   type: "string",
        //   width: 80,
        //   align: "left"
        // },
        //     {
        //   field: "payStatus",
        //   title: "支付状态",
        //   type: "string",
        //   width: 80,
        //   align: "left"
        // },
        {
          field: "payDate",
          title: "支付时间",
          type: "datetime",
          width: 85,
          align: "left",
          sortable: true
        },
      ],
      UseDetailscolumns:[
      {
          field: "BizId",
          title: "短信ID",
          type: "string",
          width: 50,
          align: "left"
        },
        {
          field: "customer_phone",
          title: "手机号",
          type: "string",
          width: 120,
          align: "left"
        },
        {
          field: "createDate",
          title: "发送时间",
          type: "datetime",
          width: 85,
          align: "left",
          sortable: true
        },
        {
          field: "status",
          title: "发送状态",
          type: "datetime",
          width: 85,
          align: "left",
          bind: {
            key: "",
            data: [
              { key: "0", value: "失败" },
              { key: "1", value: "成功" },
              { key: '', value: '' },
            ]
          },
          sortable: true
        },
        {
          field: "Content",
          title: "短信内容",
          type: "string",
          width: 750,
          align: "left"
        },
        {
          field: "number",
          title: "计费条数",
          type: "string",
          width: 80,
          align: "left"
        },
        {
          field: "TemplateCode",
          title: "模板编码",
          type: "string",
          width: 80,
          align: "left"
        },
        
        {
          field: "response",
          title: "发送结果",
          type: "string",
          width: 80,
          align: "left"
        },
       
        {
          field: "playStartDate",
          title: "操作",
          type: "datetime",
          width: 85,
          align: "left",
          sortable: true
        },
      ],
      columns: [
        {
          field: "createDate",
          title: "日期",
          type: "datetime",
          width: 85,
          align: "left",
          sortable: true
        },
        {
          field: "number",
          title: "发送数量(条数)",
          type: "string",
          width: 85,
          align: "left",
          sortable: true
        },
        // {
        //   field: "title",
        //   title: "送达数量(条)",
        //   type: "string",
        //   width: 80,
        //   align: "left"
        // },
        // {
        //   field: "name",
        //   title: "送达人次(条)",
        //   type: "string",
        //   edit: { type: "text" },
        //   width: 70,
        //   align: "left"
        // }
      ]
    };
  },
  methods: {
    onSubmit() {
      let param = {
        order: "desc",
        page: 1,
        rows: 100,
        sort: "createDate",
        wheres: `[{\"name\":\"createDate\",\"value\":\"${this.formInline.time}\",\"displayType\":\"thanorequal\"},{\"name\":\"customer_phone\",\"value\":\"${this.formInline.phone}\",\"displayType\":\"like\"}]`
        // `[{\"name\":\"id\",\"value\":\"${v}\",\"displayType\":\"text\"}]`
      };
        this.http.post("/api/MsgNotes/getPageData", param).then(res => {
       this.UseDetailsData = res.rows
       console.log(this.UseDetailsData,"res----")

      })
      },
    BuyNow() {
    },
    closeChild(){
      console.log("支付");
    },
    BuySMS() {
      this.model.box = true;
    },
    UseDetails() {
      this.model.box1 = true;
      this.SearchList()
    },
    PurchaseRecord() {
      this.model.box2 = true;
      this.PurchaseRecordList()
    },
    getValue() {
      this.form.RechargedVolume = this.form.tabPosition;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params = {
        start: 0,
        count: val,
      };
      this.AccountsGet();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.start = (val - 1) * this.params.count;
      this.AccountsGet();
    },
    PurchaseRecordList(){
      let param = {
        order: "desc",
        page: 1,
        rows: 100,
        sort: "id",
        wheres:"[]"
      };
        this.http.post("/api/Mall_message_recharge/getPageData", param).then(res => {
       this.PurchaseRecordData = res.rows
       console.log(this.UseDetailsData,"res----")

      })
    },
    initTime() {
				// console.log("时间", e);
				let date = new Date();
				let year = date.getFullYear(); //年
				let month = (date.getMonth() + 1).toString().padStart(2, "0"); //月
				let day = date.getDate().toString().padStart(2, "0");
				let hours = date.getHours().toString().padStart(2, "0");
				let minutes = date.getMinutes().toString().padStart(2, "0");
          console.log(year,month)
        return year+'-'+month;
			},
    SearchList(){
      console.log(1111);
      let param = {
        order: "desc",
        page: 1,
        rows: 100,
        sort: "id",
        wheres:"[]"
        // wheres:"[{\"name\":\"createDate\",\"value\":\"2023-02-16 00:00:00\",\"displayType\":\"thanorequal\"},{\"name\":\"createDate\",\"value\":\"2023-02-16 23:59:59\",\"displayType\":\"lessorequal\"}]"
        // // `[{\"name\":\"id\",\"value\":\"${v}\",\"displayType\":\"text\"}]`
      };
        this.http.post("/api/MsgNotes/getPageData", param).then(res => {
       this.UseDetailsData = res.rows
       console.log(this.UseDetailsData,"res----")

      })
      this.http.post("/api/MsgNotes/MsgNum").then(res => {
        this.mesCount=res.data.mesCount
       this.dayCount=res.data.dayCount
       this.monthCount=res.data.monthCount
      })
     let date=this.initTime()
      this.http.get(`/api/MsgNotes/GetMsgNum?date=${date}`).then(res => {
       this.dayList=res.data
      console.log(this.dayList)
      })

    },
    //搜索上一月数据
onday(){
  let CurrentDate = "";
  console.log(year);
  console.log(month);
  if(month<1){
    CurrentDate = (year - 1) + "-" + "12"
    year = year - 1
    month=11
  }else{
    CurrentDate = month<10?year + "-" +'0'+ month:year + "-" + month
   month=month-1
  }
  
  this.MsgNum(CurrentDate)
},
nextday(){
  console.log(year);
  console.log(month);
    let CurrentDate = "";
    if(month>12){
      CurrentDate = (year + 1) + "-" + "01"
      year= year + 1
      month=1
    }else{
      CurrentDate = month<10?year + "-" +'0'+ month:year + "-" + month
      month=month+1
    }
    
   console.log(CurrentDate)
   this.MsgNum(CurrentDate)
},
MsgNums(){
  let date =this.initTime()
  this.MsgNum(date)
},
    MsgNum(date){
      this.http.get(`/api/MsgNotes/GetMsgNum?date=${date}`).then(res => {
       this.dayCount=res.data.dayCount
       this.monthCount=res.data.monthCount
       this.dayList=res.data
      })
    }

  },mounted(){
  },
   created(){ this.SearchList()
  },
  watch:{
    "form.RechargedVolume"(n,v){
      this.form.totalExpenses=this.form.RechargedVolume*0.6
    }
  }
};
</script>

<style lang="less" scoped>
.p_center {
  text-align: center;
}
.el_card_height {
  height: 80px;
}
.paginat {
  text-align: center;
}
</style>
